<template>
  <div style="height:6vh;padding: 10px 20px;background-color: #fff">
    <span style="line-height: 60px;font-size: 20px">菜单管理</span>
    <el-button style="float: right;margin-top: 10px;"
               @click="saveMenu()"
               type="primary">添加菜单
    </el-button>
  </div>

  <el-dialog :title="dialogTitle"
             style="width: 500px;padding: 40px"
             :before-close="closeDialog"
             v-model="isShowDialog"
             @beore-close=""
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="菜单名称">
            <el-input v-model="saveMenuForm.title" placeholder="请输入菜单名称"/>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="组件名称">
            <el-input v-model="saveMenuForm.componentCode" placeholder="请输入组件名称"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="排序">
            <el-input v-model="saveMenuForm.sort" placeholder="排序"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button @click="doSaveMenuForm" type="primary">保存</el-button>
    </template>
  </el-dialog>

  <div>
    <el-table
        :data="menu"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
    >
      <el-table-column prop="title" label="名称"/>
      <el-table-column prop="componentCode" label="组件名称"/>
      <el-table-column prop="sort" label="排序"/>
      <el-table-column prop="createBy.username" label="创建人"/>
      <el-table-column  label="更新人">
        <template #default="{row}">
          {{ row.updateBy?.username || '暂无更新' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-button size="small" type="primary"  @click="addSubMenu(row.id)">添加子级菜单</el-button>
          <el-button size="small"  type="primary" @click="saveMenu(row)">编辑</el-button>
          <el-button size="small" type="danger"  @click="deleteMenu(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import {useMenu} from "@/store/module/menuStore.js";
import {storeToRefs} from "pinia";
import {ref} from "vue";
import {saveMenuApi,deleteMenuApi} from "@/api/system/SysMenuApi.js";
import {ElMessage} from "element-plus";

const {generateMenus} = useMenu();
const {allMenus:menu} = storeToRefs(useMenu());
const dialogTitle = ref('添加菜单');
const isShowDialog = ref(false);
const saveMenuForm = ref({
  title: '',
  componentCode: '',
  sort: ''
});

const closeDialog = () => {
  isShowDialog.value = false;
  dialogTitle.value = '添加菜单';
  saveMenuForm.value = {};
}

const doSaveMenuForm = async () => {
  const dataParams = JSON.parse(JSON.stringify(saveMenuForm.value));
  let isInsert = Boolean(dataParams.id);
  if(isInsert) dataParams.createBy && (dataParams.createBy = dataParams.createBy.id)
  if(isInsert) dataParams.updateBy && (dataParams.updateBy = dataParams.updateBy.id)
  await saveMenuApi(dataParams);
  await generateMenus();
  ElMessage.success(!isInsert ? "修改成功！" : "添加成功!");
  closeDialog();
}

const addSubMenu =async (pid)=>{
  dialogTitle.value = '添加子级菜单';
  isShowDialog.value = true;
  saveMenuForm.value.pid = pid;
}
const saveMenu = async (row)=>{
  dialogTitle.value = row ? '编辑菜单' : '添加菜单';
  isShowDialog.value = true;
  saveMenuForm.value = row ? {...row} : {pid:0};
}
const deleteMenu = async id => {
  await deleteMenuApi(id);
  await generateMenus();
  ElMessage.success("删除成功！")
}
</script>